<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/index_bg.png" class="bg-color"
			mode="aspectFill"></image>
		<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
			<view slot="top">
				<!-- logo -->
				<image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/index_logo_1.png" mode="aspectFit"
					class="index-logo" :style="{marginTop: `${statusBarHeight}px`}"></image>
				<!-- banner -->
				<image class="index-banner" :src="indexImg" mode="aspectFit">
				</image>
				<!-- 公告 -->
				<view class="index-notice-box">
					<view class="index-notice">
						<image class="notice-bg"
							src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/index_notice_bg.png" mode="aspectFill">
						</image>
						<image class="notice_title_img"
							src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/index_notice_title.png" mode="aspectFit">
						</image>
						<view class="notice_content">
							<view class="notice_item" v-for="(item, idx) in noticeList" :key="idx"
								@click="jump('notice_info', item.id)">
								<view class="notice_title">{{item.title}}</view>
								<view class="notice_time">{{$datetimeToDate(item.created_at)}}</view>
							</view>
						</view>
						<view class="notice_more" @click="jump('notice_list')"><uv-icon name="arrow-right" color="#686161"
								size="17"></uv-icon></view>
					</view>
				</view>

			</view>

			<!-- 案例 -->
			<view class="padidng-box">
				<!-- 按钮 -->
				<view class="btn-box">
					<view class="btn-item" @click="jump('project')">
						<image class="btn-icon" src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/index_icon_1.png"
							mode="aspectFit"></image>
						<view class="btn-title">新增项目</view>
					</view>
					<view class="btn-item" @click="jump('afterSales')">
						<image class="btn-icon" src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/index_icon_2.png"
							mode="aspectFit"></image>
						<view class="btn-title">售后报修</view>
					</view>
					<view class="btn-item" @click="jump('projectList')">
						<image class="btn-icon" src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/index_icon_3.png"
							mode="aspectFit"></image>
						<view class="btn-title">项目管理</view>
					</view>
					<view class="btn-item" @click="jump('company')">
						<image class="btn-icon" src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/index_icon_4.png"
							mode="aspectFit"></image>
						<view class="btn-title">企业介绍</view>
					</view>
				</view>

				<view class="title-comm-box">
					<view class="title-text">精选案例</view>
					<view class="btn" @click="jump('case_list')">查看全部</view>
				</view>


				<view class="case-item" v-for="(item, idx) in caseList" :key="idx" @click="jump('case_info', item.id)">
					<image class="case-img" :src="item.admin_case_list[0].file_url" mode="aspectFill"></image>
					<view class="case-right">
						<view>
							<view class="case-title">{{item.title}}</view>
							<view class="case-tag"><span :style="{color: item.brand_colour}">{{item.brand_name}}</span></view>
						</view>
						<view class="case-author-box">{{$datetimeToDate(item.created_at)}}</view>
					</view>
				</view>
			</view>
			<!-- 尾部 -->
			<tabbar slot="bottom" ref="tabbar"></tabbar>
		</z-paging>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 44,
				loading: true,
				indexImg: '',
				noticeList: [],
				// 案例数据
				caseList: [],

				currVideo: '',
				preVideoShow: false,
			}
		},
		onShow() {
			this.$refs.tabbar.getUserInfo()
		},
		onLoad() {
			uni.hideTabBar();
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			setTimeout(() => {
				this.loading = false
			}, 300)
			this.getData()
		},
		methods: {
			// ----------------------------跳转----------------------------
			jump(type, id) {
				let filterArr = ['company', 'notice_list', 'notice_info', 'case_list', 'case_info']
				let url = ''
				switch (type) {
					case 'project':
						url = '/pages/add_project/add_project'
						break;
					case 'afterSales':
						url = '/pages/add_repair/add_repair'
						break;
					case 'projectList':
						uni.switchTab({
							url: '/pages/project/project'
						});
						return;
					case 'company':
						url = '/pages/company/company'
						break;
					case 'notice_list':
						url = '/pages/notice/notice_list'
						break;
					case 'notice_info':
						url = '/pages/notice/notice_info?id=' + id
						break;
					case 'case_list':
						url = '/pages/case/case_list'
						break;
					case 'case_info':
						url = '/pages/case/case_info?id=' + id
						break;
				}

				if (!filterArr.includes(type)) {
					if (uni.getStorageSync('userInfo').empower == 0 || !uni.getStorageSync('userInfo')) {
						uni.navigateTo({
							url: '/pages/login/login'
						});
						return;
					}
				}
				uni.navigateTo({
					url
				});
			},
			// ----------------------------案例----------------------------
			preFile(item) {
				if (item.file_type == 1) {
					// 图片
					let urls = [];
					item.case_list.forEach((file) => {
						urls.push(file.file_url);
					});
					uni.previewImage({
						urls
					});
				} else {
					this.preVideoShow = true;
					this.currVideo = item.case_list[0].file_url;
				}
			},
			maskClick() {
				this.preVideoShow = false;
				this.currVideo = '';
			},
			// ----------------------------请求数据----------------------------
			onRefresh() {
				// this.$refs.paging.complete();
				this.getData()
			},
			getData() {
				// 获取首图
				this.$Api.wxHomepageData({
					type: 1,
					page: 1,
					num: 1
				}).then((res) => {
					console.log(res, '小程序配置数据-type1');
					setTimeout(() => {
						// 停止刷新动画
						this.$refs.paging.complete();
					}, 300);
					if (res.code == 200) {
						this.indexImg = res.data.list[0].file_url
					}
				}).catch((err) => {
					setTimeout(() => {
						// 停止刷新动画
						this.$refs.paging.complete();
					}, 300);
				});
				// 获取公告
				this.$Api.wxHomepageData({
					type: 3,
					page: 1,
					num: 2
				}).then((res) => {
					console.log(res, '小程序配置数据-type3');

					if (res.code == 200) {
						this.noticeList = res.data.list
					}
				}).catch((err) => {
					setTimeout(() => {
						// 停止刷新动画
						this.$refs.paging.complete();
					}, 300);
				});
				// 获取案例
				this.$Api.wxHomepageData({
					type: 2,
					page: 1,
					num: 6
				}).then((res) => {
					console.log(res, '小程序配置数据-type2');

					if (res.code == 200) {
						this.caseList = res.data.list
					}
				}).catch((err) => {
					setTimeout(() => {
						// 停止刷新动画
						this.$refs.paging.complete();
					}, 300);
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "index.scss";
</style>